<template>
  <NewCard title="供应机构" :isright="true">
    <template slot="right">
        <el-button type="text" class="handleBtn" @click="clickEdit">操作</el-button>
    </template>

    <!-- 供应机构 -->
    <div class="conditionsTxt">
        <h3>
          <p>机构名称</p>
          <p>使用地区</p>
        </h3>
        <ul>
          <li v-for="(item, index) in tableList" :key="index" @click="clickList(item)" :class="orgId == item.id?'isActive':''">
              <p>{{item.name}}</p>
              <p>
                <el-tooltip class="item" effect="dark" :content="getCity(item.cityCodes)" placement="top-start">
                    <span>{{getCity(item.cityCodes)}}</span>
                </el-tooltip>
              </p>
          </li>
        </ul>
    </div>

    <!-- 底部按钮 
    <div class="bottomBtn">
        <el-button @click="clickbBtn" v-show="bottomBtnShow">+添加供应机构</el-button>
        <div class="addAss-box" v-show="bottomBtnShow==false">
        <div class="addAss-btn">
            <el-input 
            v-model="bottomBtnValue"
            placeholder="供应机构"
            ref="bottBtn">
            </el-input>
            <el-input 
            v-model="bottomBtnValue"
            placeholder="使用地区">
            </el-input>
            <el-button type="primary" round>确定</el-button>
            <el-button round @click="bottomBtnShow=true">取消</el-button>
        </div>
        </div>
    </div>-->

    <!-- 供应机构抽屉  -->
    <el-drawer
      title="供应机构"
      size="40%"
      @close="drawerClose"
      :visible.sync="editDrawer">
        <div class="edit-box" v-hasPermi="['tool:loanOrganization:edit']">
            <h3>
                <p>删除</p>
                <p>机构名称</p>
                <p>使用地区</p>
            </h3>
            <div class="edit-list" v-for="(item, index) in tableList" :key="index">
                <i class="el-icon-remove" @click="removeList(item)" v-hasPermi="['tool:loanOrganization:remove']"></i>
                <el-input v-model="item.name" ref="editInput" @blur="blurInput(item)" @input="addInputValue(item)"></el-input>
                <el-cascader
                  :options="options"
                  :props="props"
                  :show-all-levels="false"
                  v-model="item.city"
                  @change="changeCity(item)"
                  clearable></el-cascader>
            </div>
            <!-- 添加图标 -->
            <p class="drawerAdd">
                <svg-icon icon-class="add-icon" @click="addList" v-hasPermi="['tool:loanOrganization:add']"/>
            </p>
        </div>
        <SubBtn v-if="addBtnState">
            <template slot="btn">
                <el-button round @click="cancelBtn">取消</el-button>
                <el-button type="primary" round @click="saveBtn">保存</el-button>
            </template>
        </SubBtn>
    </el-drawer>
  </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";

import {getLoanOrganizationListApi,getLoanOrganizationAddApi,getLoanOrganizationEditApi,getLoanOrganizationRemoveApi} from "@/wss/newApi_3-24/tool/loanOrganization.js"
//引入省市区数据的插件
import { provinceAndCityData,CodeToText } from "element-china-area-data";
import debounce from "lodash/debounce";
export default {
  components:{
    NewCard,
    SubBtn,
  },
  data(){
    return{
      tableList:[],// 供应机构
      orgId:'',// 当前选中的机构id
      bottomBtnShow:true,//底部按钮
      bottomBtnValue:'',//底部输入值

      props: { multiple: true },//级联选择器多选
      options: provinceAndCityData, //省市的数据
      addBtnState: false,// 添加取消的按钮
      
      editBtnState: false,// 标识是否为保存按钮的状态
      editDrawer: false,//编辑材料的状态
      drawerState:false,//当前 材料抽屉的状态
      temTableList:[],//暂存的数据
    }
  },
  mounted(){
    this.getLoanOrganizationList()// 获取贷款机构
  },
  methods:{
    // 获取贷款机构
    async getLoanOrganizationList(){
      let result = await getLoanOrganizationListApi()
      if(result.code == 200){
        this.tableList = result.rows
        // 添加城市数据回显到级联选择器
        this.tableList.forEach(item=>{
          let cityArr = item.cityCodes.split(',')
          item.city = []
          cityArr.forEach((ca,i)=>{
            let arr = []
            arr[0] = ca.slice(0, 2) + '0000'
            arr[1] = ca
            item.city[i]=arr
          })
        })
        // 默认选中第一个的机构id
        this.orgId = this.tableList[0].id
        this.$bus.$emit('getOrgId',this.tableList[0].id) //传递机构id
      }
    },

    // 获取使用地区
    getCity(cityCodes){
      let cityArr = cityCodes.split(',')
      let city = ''
      cityArr.forEach(item => {
        if(CodeToText[item] != '全部'){
          city = city + CodeToText[item] +','
        }
      });
      city = city.substr(0, city.length - 1)
      return city
    },

    // 点击添加机构
    clickbBtn(){
      //显示输入框
      this.bottomBtnShow = false
      //输入框自动获取焦点
      this.$nextTick(()=>{
        this.$refs.bottBtn.focus()
      })
    },

    //点击操作按钮
    clickEdit(){
        this.editDrawer = true //显示编辑材料
        this.temTableList = JSON.parse(JSON.stringify(this.tableList)) //暂存项目材料数据
    },
    // 当关闭编辑项目材料的时候
    editDrawerClose(){
        if(!this.editBtnState){
            this.tableList = JSON.parse(JSON.stringify(this.temTableList)) //恢复项目材料数据
        }
    },
    
    // 添加一条供应机构
    addList(){
      // 如果之前的一条没点保存不给添加新的一条
      if(this.addBtnState) {
        this.$message({message: '请保存！',type: 'warning'});
        return
      }

      // 添加
      this.tableList.push({
        name:'',
        cityCodes:'',
      })
      // 激活输入框
      this.$nextTick(()=>{
        this.$refs.editInput[this.$refs.editInput.length-1].focus()
      })
      // this.addBtnState = true //显示按钮
    },

    // 名字输入框失焦
    async blurInput(item){
      if(item.id){
        // 修改的
        
      }else{
        // 添加的
        // if(item.name == ''){
        //   this.$message.error("机构名称不能为空");
        //   // 获得下标
        //   let index = this.tableList.indexOf(item);
        //   this.tableList.splice(index,1)
        // }else{
        //   await this.getLoanOrganizationAdd(item)// 添加的接口
        //   this.getLoanOrganizationList()// 重新获取贷款机构
        // }
      }
    },

    // 输入完成之后添加
    addInputValue: debounce(async function(item){
      if(!item.id){
        // 判断填写完整的话才保存
        if(item.name != '' && item.cityCodes != ''){
          await this.getLoanOrganizationAdd(item)// 添加的接口
          this.getLoanOrganizationList()// 重新获取贷款机构
        }
      }else{
        // 编辑的
        if(item.name == ''){
          this.$message.error("请填写完整数据");
        }else{
          await this.getLoanOrganizationEdit(item)// 编辑的接口
          this.getLoanOrganizationList()// 重新获取贷款机构
        }
      }
    },1000),

    // 点击添加的取消按钮
    cancelBtn(){
      // 删掉最后一条
      this.tableList.splice(this.tableList.length-1,1)
      // this.editDrawer = false //关闭抽屉
      this.addBtnState = false //隐藏按钮
    },

    // 点击添加的保存按钮
    async saveBtn(){
      let item = this.tableList[this.tableList.length-1]
      // 添加的
      if(item.name == '' || item.cityCodes == ''){
        this.$message.error("请填写完整");
      }else{
        await this.getLoanOrganizationAdd(item)// 添加的接口
        await this.getLoanOrganizationList()// 重新获取供应机构
        this.addBtnState = false //隐藏按钮
      }
    },

    // 添加的接口
    async getLoanOrganizationAdd(item){
      let result = await getLoanOrganizationAddApi(item)
      if(result.code == 200){
        this.$message({message: '添加成功',type: 'success'});
      }
    },

    // 级联选择器改变的时候
    async changeCity(item){
      let cityCodes = ''
      item.city.forEach(i =>{
        cityCodes = cityCodes + i[1] + ','
      })
      cityCodes = cityCodes.substr(0, cityCodes.length - 1)
      item.cityCodes = cityCodes
      // 有id的情况下才是编辑
      if(item.id){
        await this.getLoanOrganizationEdit(item)// 编辑的接口
      }else{
        // 判断填写完整的话才保存
        if(item.name != '' && item.cityCodes != ''){
          await this.getLoanOrganizationAdd(item)// 添加的接口
          this.getLoanOrganizationList()// 重新获取贷款机构
        }
      }
    },

    // 编辑的接口
    async getLoanOrganizationEdit(item){
      let result = await getLoanOrganizationEditApi(item)
      if(result.code == 200){
        // this.$message({message: '编辑成功',type: 'success'});
      }
    },

    // 删除一条数据
    async removeList(item){
      if(item.id){
        await this.getLoanOrganizationRemove(item.id)
        this.getLoanOrganizationList()// 重新获取贷款机构
      }else{
        // 获得下标
        let index = this.tableList.indexOf(item);
        // 根据下标去删数据
        this.tableList.splice(index,1)
        this.addBtnState = false //关闭取消和保存按钮
      }
    },

    // 删除的接口
    async getLoanOrganizationRemove(id){
      let result = await getLoanOrganizationRemoveApi(id)
      if(result.code == 200){
        this.$message({message: '编辑成功',type: 'success'});
      }
    },

    // 抽屉关闭的时候
    drawerClose(){
      this.getLoanOrganizationList()// 重新获取贷款机构
    },

    // 点击某一行的时候
    clickList(item){
      this.orgId = item.id
      this.$bus.$emit('getOrgId',item.id)
    }
  },
}
</script>

<style scoped>
ul,h3,h4,p {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd20 {
  padding: 0 20px;
}
.mb60 {
  margin-bottom: 60px;
}
::v-deep .el-card{
  position: relative;
}
::v-deep .el-card__body {
  height: 100%;
  padding: 0;
}
::v-deep .el-card__body .top{
  margin: 0 30px;
}
::v-deep .el-card__body > div {
  height: calc(100% - 45px);
  overflow-y: auto;
}
::v-deep .el-card__body > div::-webkit-scrollbar {
  width: 0;
}
/* 操作按钮 */
.handleBtn {
  color: #f87a23;
  font-size: 12px;
}

/* 供应机构 */
.conditionsTxt h3 {
  display: flex;
  font-size: 12px;
  font-weight: 600;
  color: #909aaa;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
  margin: 0 30px;
  margin-top: 10px;
}
.conditionsTxt h3 > p:first-child {
  width: 40%;
}
.conditionsTxt h3 > p:nth-child(2) {
  width: 60%;
}
.conditionsTxt ul>li{
  display: flex;
  font-size: 14px;
  font-weight: 400;
  color: #2E3F5E;
  padding: 0 30px;
  line-height: 48px;
}
.conditionsTxt ul>li:hover,
.conditionsTxt ul>li.isActive{
  background-color: #F5F7FA;
}
.conditionsTxt ul>li>p{
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
  border-bottom: 1px solid #F5F7FA;
}
.conditionsTxt ul>li>p:first-child{
  width: 40%;
}
.conditionsTxt ul>li>p:nth-child(2) {
  width: 60%;
}

/* 编辑项目抽屉样式 */
::v-deep .el-drawer__header{
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
::v-deep .el-drawer__header>span{
    font-size: 18px;
    font-weight: bold;
    color: #2E3F5E;
    padding-left: 20px;
    background: url('~@/wss/assets/image/icon/cardLeft.png') left center no-repeat;
    background-size: 7px;
}

/* 抽屉 */
.edit-box{
    padding: 0 20px;
    margin-bottom: 60px;
}
.edit-box h3{
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 600;
  color: #909AAA;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 15px;
}
.edit-box h3>p:first-child{
  width: 12%;
}
.edit-box h3>p:nth-child(2){
  width: 35%;
}
.edit-box h3>p:nth-child(3){
  flex: 1;
}

.edit-list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #EBEEF5;
}
.edit-list i{
    width: 8%;
    color: #909aaa;
    cursor: pointer;
}
.edit-list .el-input:nth-child(2){
    width: 32%;
}
.edit-list .el-cascader:nth-child(3){
    width: 55%;
    margin-left: auto;
}
::v-deep .edit-list .el-input .el-input__inner{
  border: 0;
}

.drawerAdd{
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #f5f7fa;
}
.drawerAdd svg{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #909aaa;
    margin-left: 10%;
    cursor: pointer;
}

.edit-list >>> .el-input__suffix{
  display: none;
}

/* 添加按钮 */
.bottomBtn{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #F8F8F8;
  border-top: 1px solid #ECEDF0;
  z-index: 99;
}
.bottomBtn>.el-button{
  width: 100%;
  border: 0;
  background-color: #F8F8F8;
  line-height: 25px;
  color: #606E84;
}

.addAss-box{
  padding: 6px 30px;
}
::v-deep .bottomBtn .el-input .el-input__inner{
  height: 36px;
  line-height: 36px;
}
.addAss-btn{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.addAss-btn .el-input:nth-child(1){
  width: 25%;
}
.addAss-btn .el-input:nth-child(2){
  width: 35%;
}
.addAss-btn .el-button{
  height: 34px;
  padding: 0 20px;
  margin-left: 0;
  border-radius: 30px;
}
.addAss-btn .el-button.el-button--primary{
  background-color: #F87A23;
  border-color: #F87A23;
}

/* 右侧按钮样式 */
::v-deep .subBtn{
  padding: 8px 30px!important;
  z-index: 99;
}
::v-deep .subBtn>.el-button{
  width: 100px;
  padding: 8px 0!important;
  font-size: 14px;
  color: #606E84;
}
.subBtn>.el-button >>> span,
.subBtn>.el-button >>> span>a{
    display: block;
}
::v-deep .subBtn>.el-button.el-button--primary{
  background-color: #F87A23;
  border-color: #F87A23;
  color: #fff;
}

@media (max-width: 1180px) {

}
@media (max-width: 1120px) {
  
}
</style>